(function pages_js() {
    // 获取 pages 对应的 dom
    let pages = document.querySelector('.biggest-box');
    // 获取窗口总宽度
    let w_width = window.innerWidth;
    // 获取可滑动区域总宽度
    let allow_width = pages.scrollWidth;
    // 定义 pages 初始的位置
    let pages_translateX = 0;
    // 用户滑动后 pages 应该在这个位置
    let new_pages_translateX = 0;
    // 是否触发滑动效果的标志位
    let touchmove_flag = 0;
    // 设置 pages 的初始位置
    set_pages_x(0);
    
    pages.addEventListener('touchstart', function (e) {
        // 获取手指按下时的水平坐标
        e = e.changedTouches[0];
        let start_x = e.clientX;
        // 开启手指按住时滑动的效果
        touchmove_flag = 1;
        // 添加手指按住时滑动的效果
        pages.addEventListener('touchmove', function (e) {
            if (!touchmove_flag) return ;
            // 获取手指移动时的水平坐标
            e = e.changedTouches[0];
            let new_x = e.clientX;
            // 将移动的坐标设置回去
            new_pages_translateX = pages_translateX + new_x - start_x;
            set_pages_x(new_pages_translateX);
        });
    });
    
    pages.addEventListener('touchend', function (e) {
        // 检查手指滑动后离开屏幕时 是否要进行翻页操作 (后期需优化)
        if (Math.abs(new_pages_translateX - pages_translateX) > (w_width*0.4)) {
            if (new_pages_translateX - pages_translateX < 0) {
                pages_translateX -= w_width;
                if (pages_translateX <= -allow_width) pages_translateX = w_width - allow_width;
            } else {
                pages_translateX += w_width;
                if (pages_translateX > 0) pages_translateX = 0;
            }
        }
        // 添加过渡效果
        pages.style.transition = "transform 0.25s ease"; // 可以调整时间（如0.5秒）和缓动函数
        // 将pages的水平坐标设置回样式里
        set_pages_x(pages_translateX);
        // pages_translateX = new_pages_translateX;
        // 过渡结束后重置 transition 样式
        setTimeout(() => {
            pages.style.transition = "";
        }, 250); // 时间应与上面 transition 中的时间一致
        // 开启手指按住时滑动的效果
        touchmove_flag = 0;
    });

    function set_pages_x(x) {
        // 写出新样式
        let new_translateX = { transform: "translateX(" + x + "px)" };
        // 使用assign接口设置样式
        Object.assign(pages.style, new_translateX);
    }
})();
